---
title: Daten abrufen
description: Hier erfährst du, wie du mit der Fetch-API Ferndaten mit Astro abrufen kannst.
i18nReady: true
---

`.astro`-Dateien können Daten aus der Ferne abrufen, um dir bei der Erstellung deiner Seiten zu helfen.

## `fetch()` in Astro

Alle [Astro-Komponenten](/de/basics/astro-components/) haben Zugriff auf die [globale Funktion `fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) in ihrem Komponentenskript, um HTTP-Anfragen an APIs unter Verwendung der vollständigen URL (z. B. https://example.com/api) zu stellen.
Außerdem kannst du mit `new URL("/api", Astro.url)` eine URL zu den Seiten und Endpunkten deines Projekts konstruieren, die bei Bedarf auf dem Server gerendert werden.

Dieser Fetch-Aufruf wird zur Erstellungszeit ausgeführt, und die Daten stehen der Komponentenvorlage für die Erzeugung von dynamischem HTML zur Verfügung. Wenn der Modus [SSR](/de/guides/on-demand-rendering/) aktiviert ist, werden alle Fetch-Aufrufe zur Laufzeit ausgeführt.

💡 Nutze die Vorteile von [**Top-Level Await**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await) in deinem Astro-Komponentenskript.

💡 Übergib die abgerufenen Daten als Eigenschaften an Astro- als auch an Framework-Komponenten.

```astro /await fetch\\(.*?\\)/
---
// src/components/User.astro
import Contact from '../components/Contact.jsx';
import Location from '../components/Location.astro';

const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0];
---
<!-- Daten, die zur Erstellungszeit abgerufen werden, können in HTML gerendert werden -->
<h1>User</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>

<!-- Daten, die zur Erstellungszeit abgerufen werden, können als Eigenschaften an die Komponente übergeben werden -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />
```

:::note
Beachte, dass alle Daten in Astro-Komponenten zum Render-Zeitpunkt der Komponente abgerufen werden.

Deine veröffentlichte Astro-Website ruft Daten **einmalig während des Erstellungsvorgangs** ab. Während der Entwicklung wirst du aber bei jeder Komponentenaktualisierung einen Datenabruf sehen. Wenn du einen mehrfachen clientseitigen Datenabruf benötigst, nutze eine [Framework-Komponente](/de/guides/framework-components/) oder ein [clientseitiges Skript](/de/guides/client-side-scripts/) in einer Astro-Komponente.
:::


## `fetch()` in Framework-Komponenten

Die `fetch()`-Funktion ist auch global in jeder [Framework-Komponente](/de/guides/framework-components/) verfügbar:

```tsx title="src/components/Movies.tsx" /await fetch\\(.*?\\)/
import type { FunctionalComponent } from 'preact';

const data = await fetch('https://example.com/movies.json').then((response) =>
  response.json()
);

// Komponenten, die zum Zeitpunkt der Erstellung gerendert werden, loggen Daten auch in der CLI.
// Wenn sie mit einer client:*-Direktive gerendert werden, wird dies auch in der Browser-Konsole angezeigt.
console.log(data);

const Movies: FunctionalComponent = () => {
// Ausgabe des Ergebnisses in die Seite
  return <div>{JSON.stringify(data)}</div>;
};

export default Movies;
```

## GraphQL-Abfragen

Astro kann auch `fetch()` nutzen, um GraphQL-Server mit einer beliebigen gültigen GraphQL-Anfrage anzufragen.

```astro title="src/components/Film.astro" "await fetch"
---
const response = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",
  {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      query: `
        query getFilm ($id:ID!) {
          film(id: $id) {
            title
            releaseDate
          }
        }
      `,
      variables: {
        id: "ZmlsbXM6MQ==",
      },
    }),
  });

const json = await response.json();
const { film } = json.data;
---
<h1>Informationen über Star Wars: Eine neue Hoffnung abrufen</h1>
<h2>Titel: {film.title}</h2>
<p>Jahr: {film.releaseDate}</p>
```

## Abfragen von einem Headless-CMS

Astro-Komponenten können Daten aus deinem bevorzugten CMS abrufen und sie dann als Seiteninhalt wiedergeben. Mit [dynamischen Routen](/de/guides/routing/#dynamic-routes) können die Komponenten sogar Seiten auf der Grundlage deiner CMS-Inhalte erstellen.

In unseren [CMS Guides](/de/guides/cms/) findest du alle Details zur Integration von Astro in Headless CMS wie Storyblok, Contentful und WordPress.

## Community-Ressourcen

- [Erstellen einer Fullstack-App mit Astro + GraphQL](https://robkendal.co.uk/blog/how-to-build-astro-site-with-graphql/)
